window.addEventListener('load', function () {
    // 获取手机号的表单
    var tel = document.querySelector('#tel');
    //  定义手机号的正则表达式 ^\d{6}$
    var telsj = /^1[3|4|5|7|8]\d{9}$/;

    // 获取QQ号的表单
    var qq = document.querySelector('#qq');
    //  定义QQ号的正则表达式
    var telqq = /^[1-9]\d{4,}$/;//(腾讯QQ号从10000开始)

    // 获取呢称的表单
    var nc = document.querySelector('#nc');
    // 定义呢称的正则表达式 汉字:2~8位  ^[\u4e00-\u9fa5]{2,8}$ 
    var telnc = /^[\u4e00-\u9fa5]{2,8}$/;

    // 获取验证码的表单
    var mes = document.querySelector('#mes');
    // 定义验证码的正则表达式 汉字:2~8位  ^[\u4e00-\u9fa5]{2,8}$ 
    var telmes = /^[\d]{6}$/;

    // 获取密码的表单
    var pwd = document.querySelector('#pwd');
    //  定义密码的正则表达式 (以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
    var telpwd = /^[a-zA-Z0-9_-]{5,17}$/;

    // 获取确认密码的表单
    var surepwd = document.querySelector('#surepwd');
    // 1.传手机号的表单 和 正则表达式 进入函数
    regexp(tel, telsj);
    // 2.传QQ的表单 和 正则表达式 进入函数
    regexp(qq, telqq);
    // 3.传呢称的表单 和 正则表达式 进入函数
    regexp(nc, telnc);
    // 4.传呢称的表单 和 正则表达式 进入函数
    regexp(mes, telmes);
    // 5.传密码的表单 和 正则表达式 进入函数
    regexp(pwd, telpwd);
    //    表单验证的函数
    // ele 目标标签   reg 正则表达式
    function regexp(ele, reg) {
        // onblur 失去焦点触发事件
        ele.addEventListener('blur', function () {
            if (reg.test(this.value)) {
                // nextElementSibling 得到的是下一个兄弟元素节点 找不到返回null
                this.nextElementSibling.innerHTML = '<i class="success"></i>' + '恭喜您输入正确';
                this.nextElementSibling.className = 'success_or';
            } else {
                this.nextElementSibling.innerHTML = '<i class="error_icon"></i>' + '很抱歉您输入错误,请重新输入';
                this.nextElementSibling.className = 'error';
            }
        })
    }
    // 确认密码
    surepwd.addEventListener('blur', function () {
        if (pwd.value == surepwd.value) {
            this.nextElementSibling.innerHTML = '<i class="success"></i>' + '恭喜您输入正确';
            this.nextElementSibling.className = 'success_or';
        } else {
            this.nextElementSibling.innerHTML = '<i class="error_icon"></i>' + '很抱歉您输入错误,请重新输入';
            this.nextElementSibling.className = 'error';
        }
    })
})